<template>
  <div class="containt">
    <nav-com
      title="分享好友"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="bg">
      <img
        :src="'https://api.qrserver.com/v1/create-qr-code?data='+testUrl"
        alt=""
      >
      <div class="userid">
        {{referralCode}}
      </div>
      <div class="bottom-button">
        <div
          class="button"
          @click="show=true"
        >
        分享加入
        </div>
        <div class="button" @click="savePost">
          保存分享海报
        </div>
      </div>
    </div>
    <van-dialog
      class="dialog"
      v-model="show"
      title="分享加入"
      :show-cancel-button='true'
      :showConfirmButton='true'
      @confirm='setting'
    >
      <!-- <div class="icon">
        <van-icon name="cross" />
      </div> -->

      <van-field
        v-model="leaderMobile"
        placeholder="请输入负责人的手机号"
        type="number"
      />
      <!-- <div
        @click="setting"
        class="setting-button"
      >
        设置
      </div> -->
    </van-dialog>
    <van-popup v-model="showTips">
      <div class="popup">
        <div
          style="
            color: #000000;
            line-height: 80px;
            font-weight: 600;
            font-size: 17px;"
        >
          分享步骤
        </div>
        <div >
            <div style="display: flex;margin: 20px 0;align-items: center;">
              <div style="line-height: 20px;background-color: #FE4B20;color: white;border-radius: 50%; width: 20px;height: 20px;text-align: center;margin-right: 10px;">1</div>
              <div style="color: #000000;">手机截图保存此页面</div>
            </div>
            <div style="display: flex;margin: 20px 0;align-items: center;">
              <div style="line-height: 20px;background-color: #FE4B20;color: white;border-radius: 50%; width: 20px;height: 20px;text-align: center;margin-right: 10px;">2</div>
              <div>打开微信发送给好友</div>
            </div>
            <div style="display: flex;margin: 20px 0;align-items: center;">
              <div style="line-height: 20px;background-color: #FE4B20;color: white;border-radius: 50%; width: 20px;height: 20px;text-align: center;margin-right: 10px;">3</div>
              <div>提醒好友识别或扫描二维码注册</div>
            </div>
        </div>
        <div
          style="width: 150px;line-height: 40px;color: rgb(254, 75, 32);text-align: center;border: 1px solid rgb(254, 75, 32); border-radius: 20px;margin: 20px 0;"
          @click="showTips = false">
          我知道了
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { inviteSetting } from "@/api/api";
import navCom from "@/component/nav";
import { Toast } from 'vant';
export default {
  components: {
    navCom,
  },
  data() {
    return {
      showTips:false,
      show: false,
      leaderMobile: "",
      referralCode:'',
      testUrl:'',
    };
  },
  created(){
    this.referralCode = this.$route.params.phone
    this.testUrl =
            location.protocol +
            "//" +
            location.host +
            "/register/index.html?referralCode=" +this.referralCode;
    console.log(this.referralCode)
    console.log(this.testUrl)
  },
  methods: {
    backHandler() {
      if(weixin.isAndroid()){
        window.JS_TROOPS.goBack()
      }else{
        this.$router.go(-1);
      }
    },
    savePost(){
      this.showTips = true
      // Toast('请截图保存海报')
      if(weixin.isAndroid()){
        window.JS_TROOPS.saveImage()
      }
    },
    setting() {
      inviteSetting({parent_mobile:this.leaderMobile}).then((result) => {
        if(result.data.code == 1){
          // this.testUrl =
          //   location.protocol +
          //   "//" +
          //   location.host +
          //   "/register/index.html?referralCode=" +this.leaderMobile;
          this.show = false;
        }
        Toast(result.data.msg)
      }).catch((err) => {

      });
    },
  },
};
</script>

<style scoped>
.van-popup {
  background-color: transparent !important;
}
.popup {
  width: 85vw;
  min-height: 200px;
  background-image: url(../../assets/xyrybg.png);
  background-repeat: round;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  margin: 20px 0;
}

.containt {
  height: 100vh;
  width: 100%;
}
.bg {
  height: 100vh;
  background: url("../../assets/my/inviteBg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.bg img{
  position: absolute;
  top: 57.5vh;
  left: 32vw;
  width: 36vw;
  height: 36vw;
}
.bg .userid {
  width: 100vw;
  position: absolute;
  top: 80.5vh;
  text-align: center;
}
.bg .bottom-button {
  width: 100vw;
  position: absolute;
  top: 86vh;
  display: flex;
  justify-content: space-around;
}
.bg .bottom-button .button {
  width: 35vw;
  height: 5vh;
  border: 1px solid #fff;
  border-radius: 2.5vh;
  color: #fff;
  text-align: center;
  line-height: 5vh;
}
.setting-button {
  width: 40vw;
  height: 5vh;
  background: #fe4b20;
  border-radius: 2.5vh;
  color: #fff;
  text-align: center;
  line-height: 5vh;
  margin: 10px auto;
}
/* .dialog{
    position: relative;
}
.dialog .icon{
    position: absolute;
    top:5px;
    right: 5px;
} */
</style>
